<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				display: flex;
				width: 80%;
				height: 300px;
				background: pink;
				
				/*flex-direction控制主轴  row控制x轴为主轴排列  column控制y轴进行排列*/
				flex-direction: row;
				
				/*设置子元素是否换行 默认不换行 如果挤不开会修改属性大小*/
				flex-wrap: wrap;
				
				/*复合属性 设置哪个为主轴和是否换行*/
				flex-flow: row wrap;
				
				/*justify-content设置主轴上子元素的排列方式 flex-start从左到右*/
				/*space-around平均分配给每个盒子*/
				/*justify-content: space-between;*/
				
				/*设置侧轴上的子元素排列方式（单行） center延侧轴水平居中*/
				/*align-items: center;*/
				
				/*设置侧轴上的子元素排列方式（多行）只适用于子项出现换行的情况*/
				align-content: space-between;
				
				
			}
			div>span{
				width: 300px;
				height: 100px;
				background: red;
				margin-right: 1px;	
				

			}
		</style>
		
		
	</head>
	<body>
		<div id="">
			<span id="">
				1
			</span>
			<span id="">
				1
			</span>
			<span id="">
				1
			</span>
			<span id="">
				1
			</span>
			<span id="">
				1
			</span>
			<span id="">
				1
			</span>
		</div>
		
	</body>
</html>
